<!--
 * @Author yuec621@outLook.com
 * @Description: 曲线属性组件
 * @Date: 2024-11-04 13:34:02
 * @LastEditTime: 2025-05-15 09:17:17
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
    <div class="attrBox">
        <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="state.formData.chartTitle" @blur="inputChange" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="X轴含义">
                            <el-input v-model="state.formData.chartX" @blur="inputChange" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="Y轴含义">
                            <el-input v-model="state.formData.chartY" @blur="inputChange" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="背景色">
                            <span style="width: 100px;">
                                <el-color-picker @change="inputChange" v-model="state.formData.chartBg" show-alpha
                                    size="small" />
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="chartType==1">
                        <el-form-item label="显示网格">
                            <el-switch @change="inputChange" v-model="state.formData.chartGrid" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="chartType==1">
                        <el-form-item label="启用圆点">
                            <el-switch @change="inputChange" v-model="state.formData.chartDot" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <vxe-table height="400" :data="attrList" border="inner" v-if="chartType!=3">
                            <vxe-column field="linechart" :title="chartType==1?'曲线名称':'测点编号'">
                            </vxe-column>
                            <vxe-column field="lineWidth" title="线宽" v-if="chartType==1">
                                <template #default="{ row }">
                                    <el-input-number size="small" v-model="row.lineWidth" class="mx-4" :min="1"
                                        controls-position="right" />
                                </template>
                            </vxe-column>
                            <vxe-column field="lineType" title="线型" v-if="chartType==1">
                                <template #default="{ row }">
                                    <el-select class="w100 prefixBox" clearable filterable placeholder="请选择"
                                        size="small" v-model="row.lineType">
                                        <template #prefix>
                                            <span v-if="row.lineType=='solid'"
                                                style="display:inline-block;width: 20px;background-color: #aaa;height: 1px;">
                                            </span>
                                            <span v-else style="display:inline-block;width: 20px;height: 1px;
                                                border-bottom: 1px dashed #aaa"></span>
                                        </template>
                                        <el-option
                                            v-for="item in [{label:'实线',value:'solid'},{label:'虚线',value:'dashed'}]">
                                            <div class="custom-option">
                                                <span class="line-preview"
                                                    :style="{ borderBottom: `1px ${item.value} #000` }"></span>
                                            </div>
                                        </el-option>
                                    </el-select>
                                </template>
                            </vxe-column>
                            <vxe-column field="lineColor" title="颜色">
                                <template #default="{ row }">
                                    <el-color-picker style="width: 100px;" v-model="row.lineColor" show-alpha
                                        size="small" />
                                </template>
                            </vxe-column>
                            <vxe-column field="chartType" title="曲线类型" v-if="chartType==1">
                                <template #default="{ row }">
                                    <el-select size="small" class="w100" clearable filterable v-model="row.chartType"
                                        placeholder="请选择">
                                        <el-option
                                            v-for="(item, index) in [{type:false,label:'折线'},{type:true,label:'曲线'}]"
                                            :key="index" :label="item.label" :value="item.type"></el-option>
                                    </el-select>
                                </template>
                            </vxe-column>
                            <vxe-column field="dotSwitch" title="启用圆点" v-if="chartType==1">
                                <template #default="{ row }">
                                    <el-switch v-model="row.dotSwitch" />
                                </template>
                            </vxe-column>
                            <template #empty>
                                <span class="nodataClass">
                                    <img src="@/assets/images/空白.png">
                                    <p>请先选择测点!</p>
                                </span>
                            </template>
                        </vxe-table>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const color = ref('#000')
    const emits = defineEmits([''])
    const props = defineProps({
        chartType: {
            type: Number,
            default: () => {
                return 1
            }
        },
        attrList: {
            type: Array,
            default: () => {
                return []
            }
        },
        attrObj: {
            type: Object,
            default: {
                chartTitle: undefined,
                chartBg: undefined,
                chartX: undefined,
                chartY: undefined,
                chartGrid: false,
                chartDot: false,
            }
        },
    })
    // 重点
    const state = reactive({
        formData: {
            chartBg: '#ffffff',
            chartDot: false
        },
        rules: {},
        yinziList: []
    })

    function inputChange(val) {
        emits('submitClickattr', state.formData)
    }
    emits('submitClickattr', state.formData)
    console.log(props.attrObj, 'props.attrObjv');

    state.formData = props.attrObj
</script>
<style lang="scss" scoped>
    .custom-option {
        display: flex;
        align-items: center;
        padding: 8px 0;
    }

    .line-preview {
        width: 40px;
        margin-right: 10px;
    }

    .line-label {
        flex: 1;
    }

    /* 调整下拉框宽度 */
    .el-select-dropdown {
        min-width: 200px;
    }

    :deep(.el-color-picker__trigger) {
        padding: 0;
        border: none;
    }

    :deep(.el-color-picker) {
        display: block !important;
    }

    :deep(.el-color-picker--small .el-color-picker__trigger) {
        width: 100%;

    }

    :deep(.el-color-picker__color-inner) {
        justify-content: flex-end !important;
    }
</style>